<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="800px">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="120px"
      v-loading="formLoading"
    >
      <el-form-item label="监控名称" prop="monitoringName">
        <el-input v-model="formData.monitoringName" placeholder="请输入监控名称" />
      </el-form-item>
      
      <el-form-item label="监控类型" prop="monitoringType">
        <el-select v-model="formData.monitoringType" placeholder="请选择监控类型">
          <el-option label="实时监控" :value="1" />
          <el-option label="定时监控" :value="2" />
          <el-option label="事件监控" :value="3" />
          <el-option label="异常监控" :value="4" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="监控对象" prop="monitoringObject">
        <el-select v-model="formData.monitoringObject" placeholder="请选择监控对象">
          <el-option label="考试现场" value="exam" />
          <el-option label="评分系统" value="score" />
          <el-option label="考生行为" value="candidate" />
          <el-option label="设备状态" value="equipment" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="评价计划" prop="planId">
        <el-select v-model="formData.planId" placeholder="请选择评价计划">
          <el-option label="2023年第四季度电工评价" value="1" />
          <el-option label="2023年第四季度焊工评价" value="2" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="监控时间" prop="monitoringTime">
        <el-date-picker
          v-model="formData.monitoringTime"
          type="datetime"
          placeholder="选择监控时间"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      
      <el-form-item label="监控人员" prop="monitoringPersonnel">
        <el-select v-model="formData.monitoringPersonnel" placeholder="请选择监控人员" multiple>
          <el-option label="张三" value="user1" />
          <el-option label="李四" value="user2" />
          <el-option label="王五" value="user3" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="监控地点" prop="monitoringLocation">
        <el-input v-model="formData.monitoringLocation" placeholder="请输入监控地点" />
      </el-form-item>
      
      <el-form-item label="监控频率" prop="monitoringFrequency" v-if="formData.monitoringType === 2">
        <el-select v-model="formData.monitoringFrequency" placeholder="请选择监控频率">
          <el-option label="每5分钟" value="5min" />
          <el-option label="每10分钟" value="10min" />
          <el-option label="每30分钟" value="30min" />
          <el-option label="每小时" value="1hour" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="预警阈值" prop="alertThreshold">
        <el-input-number 
          v-model="formData.alertThreshold" 
          :min="0" 
          :max="100" 
          placeholder="请输入预警阈值" 
        />
        <span style="margin-left: 8px; color: #909399;">%</span>
      </el-form-item>
      
      <el-form-item label="监控指标" prop="monitoringMetrics">
        <el-checkbox-group v-model="formData.monitoringMetrics">
          <el-checkbox label="attendance">出勤率</el-checkbox>
          <el-checkbox label="equipment">设备状态</el-checkbox>
          <el-checkbox label="environment">环境质量</el-checkbox>
          <el-checkbox label="security">安全状况</el-checkbox>
          <el-checkbox label="network">网络状态</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      
      <el-form-item label="自动处理" prop="autoHandle">
        <el-switch v-model="formData.autoHandle" />
        <span style="margin-left: 8px; color: #909399;">开启后系统将自动处理异常情况</span>
      </el-form-item>
      
      <el-form-item label="监控描述" prop="monitoringDesc">
        <el-input
          v-model="formData.monitoringDesc"
          type="textarea"
          :rows="4"
          placeholder="请输入监控描述"
        />
      </el-form-item>
      
      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="formData.status">
          <el-radio :value="0">未开始</el-radio>
          <el-radio :value="1">监控中</el-radio>
          <el-radio :value="2">已完成</el-radio>
          <el-radio :value="3">已暂停</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="submitForm" type="primary" :loading="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

const emit = defineEmits(['success'])
const dialogVisible = ref(false)
const dialogTitle = computed(() => (formData.value.id ? '修改监控配置' : '添加监控配置'))
const formLoading = ref(false)
const formRef = ref()
const formData = ref({
  id: undefined,
  monitoringName: '',
  monitoringType: undefined,
  monitoringObject: '',
  planId: '',
  monitoringTime: '',
  monitoringPersonnel: [] as string[],
  monitoringLocation: '',
  monitoringFrequency: '',
  alertThreshold: 80,
  monitoringMetrics: [] as string[],
  autoHandle: false,
  monitoringDesc: '',
  status: 0
})
const formRules = ref({
  monitoringName: [{ required: true, message: '监控名称不能为空', trigger: 'blur' }],
  monitoringType: [{ required: true, message: '监控类型不能为空', trigger: 'change' }],
  monitoringObject: [{ required: true, message: '监控对象不能为空', trigger: 'change' }],
  planId: [{ required: true, message: '评价计划不能为空', trigger: 'change' }],
  monitoringTime: [{ required: true, message: '监控时间不能为空', trigger: 'change' }],
  monitoringPersonnel: [{ required: true, message: '监控人员不能为空', trigger: 'change' }],
  monitoringMetrics: [{ required: true, message: '请至少选择一个监控指标', trigger: 'change' }]
})

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  resetForm()
  if (id) {
    formLoading.value = true
    try {
      // TODO: 加载监控配置详情
      formData.value.id = id
    } finally {
      formLoading.value = false
    }
  }
}

/** 提交表单 */
const submitForm = async () => {
  const elForm = formRef.value
  if (!elForm) return
  const valid = await elForm.validate()
  if (!valid) return
  formLoading.value = true
  try {
    const data = formData.value
    if (data.id) {
      // TODO: 修改监控配置
    } else {
      // TODO: 新增监控配置
    }
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    monitoringName: '',
    monitoringType: undefined,
    monitoringObject: '',
    planId: '',
    monitoringTime: '',
    monitoringPersonnel: [],
    monitoringLocation: '',
    monitoringFrequency: '',
    alertThreshold: 80,
    monitoringMetrics: [],
    autoHandle: false,
    monitoringDesc: '',
    status: 0
  }
  if (formRef.value) {
    formRef.value.clearValidate()
  }
}

defineExpose({ open })
</script> 